<template>
    <div>
        <ul>
            <li v-for="item,index in Infos" :key="item.id">
                <span>{{ item.name }}</span>
                <span></span>
            </li>
        </ul>
    </div>
</template>

<script>
import {artistList} from '@/request/api'
export default {
    data () {
        return {
            Infos:[]
        }
    },
    props:['Info'],
    created(){
        artistList(this.Info).then(res =>{
            console.log(res);
            this.Infos = res.data.artists
        })
    }
}
</script>
 
<style lang = "less" scoped>
    div{
        ul{
            width: 736px;
            margin: 20px 0 0 -17px;
            border-top: 1px dotted #ccc;
            display: flex;
            flex-wrap: wrap;
            padding-top: 12px;
            li{
                width: 147px;
                height: 30px;
                display: flex;
                font-size: 12px;
                color: #333;
                box-sizing: border-box;
                padding-left: 17px;
                span{
                    &:nth-child(2){
                        width: 17px;
                        height: 18px;
                        background: url('../../assets/icon.png') no-repeat 0px -740px;
                    }
                }
            }
        }
    }
</style>